<template>
  <view class="container">
    <map style="width: 100%; height: 816rpx" :scale="scale" :markers="covers" :latitude="latitude" :longitude="longitude">
      <cover-view slot="callout">
        <block v-for="(item, index) in covers" :key="index">
          <cover-view class="customCallout" :marker-id="item.id">
            <cover-view class="content">{{ item.title }}</cover-view>
          </cover-view>
        </block>
      </cover-view>
    </map>
    <image src="../../static/images/indexposition.png" style="width: 64rpx; height: 64rpx; position: fixed; top: 572rpx; right: 32rpx" mode="" @click="$refs.popup.open()"></image>
    <!-- 打车时间计时 -->
    <view id="box" :style="{ height: boxheight + 'px' }" class="box">
      <!-- 司机图片 -->
      <image src="../../static/order/driver.png" style="width: 176rpx; height: 214rpx; position: absolute; top: -50rpx; right: 0" mode=""></image>
      <!-- 标题 -->
      <view class="title">
        <text v-if="obj.status == 3" @click="$refs.popup.open()">司机已接单，正努力赶来</text>
        <text v-if="obj.status == 4" @click="$refs.popup.open()">司机已到达起点，等待乘客上车</text>
        <uni-icons type="right" size="20"></uni-icons>
      </view>
      <!--司机信息 -->
      <view class="driverinfo">
        <image :src="imgurl + obj.driver.avatar" mode="" style="width: 100rpx; height: 100rpx; border-radius: 50%; margin-right: 10rpx"></image>
        <view class="right">
          <view>
            <text style="font-weight: bold; font-size: 30rpx; color: #222222">{{ obj.driver.name }}</text>
            <text style="font-weight: 500; font-size: 30rpx; color: #222222; padding-left: 18rpx">SJ5875901</text>
          </view>
          <view style="margin-top: 10rpx">
            <text style="font-weight: 500; font-size: 28rpx; color: #f2860a">{{ obj.driver.score || '' }}</text>
            <image src="../../static/order/xingxing.png" style="width: 26rpx; height: 26rpx; margin-left: 8rpx; margin-right: 34rpx" mode=""></image>
            <text style="font-weight: 500; font-size: 26rpx; color: #222222">{{ obj.driver.driving_experience || '' }}年驾龄</text>
            <text style="font-weight: 500; font-size: 26rpx; color: #222222; padding: 0 10rpx">|</text>
            <text style="font-weight: 500; font-size: 26rpx; color: #222222">{{ obj.driver.num || '' }}单</text>
          </view>
        </view>
      </view>
      <!-- 按钮 -->
      <view class="btngroup">
        <view
          @click="makephone"
          style="
            font-weight: 500;
            font-size: 30rpx;
            color: #ffffff;
            text-align: center;
            width: 194rpx;
            height: 84rpx;
            line-height: 84rpx;
            background: #3483f6;
            border-radius: 12rpx 12rpx 12rpx 12rpx;
          "
        >
          <image src="../../static/order/transpointphone.png" mode="" style="width: 28rpx; height: 28rpx; vertical-align: middle; margin-right: 14rpx"></image>
          <text>打电话</text>
        </view>
        <view
          @click="$refs.changephone.open()"
          style="
            font-weight: 500;
            font-size: 30rpx;
            color: #3483f6;
            text-align: center;
            width: 194rpx;
            height: 84rpx;
            line-height: 84rpx;
            background: #eef5ff;
            border-radius: 12rpx 12rpx 12rpx 12rpx;
            border: 2rpx solid #3483f6;
          "
        >
          <image src="../../static/order/edit.png" mode="" style="width: 28rpx; height: 28rpx; vertical-align: middle; margin-right: 14rpx"></image>
          <text>修改电话</text>
        </view>
        <view
          @click="gocancelorder"
          style="width: 194rpx; height: 84rpx; background-color: #f2f2f2; font-weight: 500; font-size: 30rpx; color: #666666; text-align: center; line-height: 84rpx"
        >
          取消订单
        </view>
      </view>
    </view>

    <!-- 修改手机号弹框 -->
    <uni-popup ref="changephone" type="center">
      <view class="cancelbox">
        <view style="font-weight: bold; font-size: 30rpx; color: #222222; text-align: center">修改手机号</view>
        <input
          type="number"
          v-model="mobile"
          placeholder="请输入修改的电话号"
          style="
            box-sizing: border-box;
            width: 432rpx;
            height: 90rpx;
            background: #f2f2f2;
            border-radius: 16rpx 16rpx 16rpx 16rpx;
            padding: 25rpx 32rpx;
            margin-left: 50rpx;
            margin-top: 30rpx;
            margin-bottom: 54rpx;
          "
        />
        <view class="btn">
          <view class="btn1" @click="$refs.changephone.close()">取消</view>
          <view class="btn2" @click="changemobile">确认</view>
        </view>
      </view>
    </uni-popup>
    <!-- 订单追踪 -->
    <uni-popup ref="popup" type="bottom">
      <view class="orderinfo">
        <view class="header">
          <text></text>
          <text style="font-weight: bold; font-size: 32rpx; color: #222222">订单追踪</text>
          <uni-icons type="close" size="20" @click="$refs.popup.close()"></uni-icons>
        </view>
        <!-- 订单号 -->
        <view style="font-weight: 500; font-size: 30rpx; color: #222222; padding-left: 34rpx; margin: 30rpx 0 48rpx 0">
          <text>订单号：</text>
          <text>LKJ395895412</text>
          <uni-steps :options="orderactive" active-color="#007AFF" :active="active" direction="column" />
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
import dayjs from 'dayjs';
export default {
  data() {
    return {
      timer: null,
      imgurl: '',
      obj: {},
      mobile: '',
      orderid: '',
      boxheight: '',
      latitude: 39.909,
      longitude: 116.39742,
      active: 6,
      orderactive: [],
      covers: [
        {
          id: 1,
          latitude: 39.909,
          longitude: 116.39742,
          iconPath: '/static/images/start.png',
          customCallout: {
            anchorY: 0, // Y轴偏移量
            anchorX: 0, // X轴偏移量
            display: 'ALWAYS' // 一直展示
          },
          title: '',
          width: '46rpx',
          height: '56rpx'
        },
        {
          id: 2,
          latitude: 39.9,
          longitude: 116.39,
          iconPath: '/static/images/end.png',
          customCallout: {
            anchorY: 0, // Y轴偏移量
            anchorX: 0, // X轴偏移量
            display: 'ALWAYS' // 一直展示
          },
          title: '',
          width: '46rpx',
          height: '56rpx'
        },
        {
          id: 3,
          latitude: 39.9,
          longitude: 116.39,
          iconPath: '/static/images/car.png',
          customCallout: {
            anchorY: 0, // Y轴偏移量
            anchorX: 0, // X轴偏移量
            display: 'ALWAYS' // 一直展示
          },
          title: '',
          width: '46rpx',
          height: '56rpx'
        }
      ],
      scale: 12
    };
  },
  methods: {
    //修改手机号
    async changemobile() {
      const res = await this.http('/order/orderMobile', {
        order_id: this.orderid,
        mobile: this.mobile
      });
      console.log('修改的手机号结果', res);
      this.$refs.changephone.close();
    },
    // 获取订单追踪
    async getzhuizong() {
      const res = await this.http('/order/ordertrack', {
        order_id: this.orderid
      });
      console.log('订单追踪', res);
      res.data.list.forEach((item) => {
        this.orderactive.push({
          title: item.memo,
          desc: dayjs(item.createtime * 1000).format('YYYY-MM-DD HH:mm')
        });
      });
    },
    // 打电话
    makephone() {
      uni.makePhoneCall({
        phoneNumber: this.obj.driver.mobile
      });
    },
    // 获取订单详情
    getdetail() {
      this.http('/order/details', {
        order_id: this.orderid
      }).then((res) => {
        console.log('订单详情', res);
        this.obj = res.data;
        if (res.data.status == 5) {
          uni.redirectTo({
            url: '/order/goend/goend?orderid=' + this.obj.id
          });
        }
        if (res.data.status == 10) {
          uni.redirectTo({
            url: '/mine/myorder/myorder?orderid=' + this.obj.id
          });
        }
        this.covers[0].title = res.data.starting;
        this.latitude = res.data.start_lat;
        this.longitude = res.data.start_lng;
        this.covers[0].latitude = res.data.start_lat;
        this.covers[0].longitude = res.data.start_lng;
        this.covers[1].title = res.data.end;
        this.covers[1].latitude = res.data.edn_lat;
        this.covers[1].longitude = res.data.edn_lng;
        this.covers[2].title = '司机等待中';

        let m = parseInt((res.data.differ_sec / 60) % 60);
        let s = parseInt(res.data.differ_sec % 60);
        m = m < 10 ? '0' + m : m;
        s = s < 10 ? '0' + s : s;
        this.covers[2].title = '已等待' + m + ':' + s;
        this.covers[2].latitude = res.data.driver_lat;
        this.covers[2].longitude = res.data.driver_lon;
      });
    },
    // 跳转到取消订单
    gocancelorder() {
      uni.navigateTo({
        url: '/order/cancelorder/cancelorder?orderid=' + this.orderid
      });
    }
  },
  onLoad(opt) {
    this.imgurl = this.img;
    if (opt.orderid) {
      this.orderid = opt.orderid;
    }
    this.getzhuizong();
    this.getdetail();
  },
  onShow() {
    this.timer = setInterval(() => {
      this.getdetail();
    }, 1000);
    // 获取剩余高度
    uni.getSystemInfo({
      success: (e) => {
        const query = uni.createSelectorQuery().in(this);
        query
          .select('#box')
          .boundingClientRect((data) => {
            this.boxheight = e.screenHeight - data.top;
            console.log('节点离页面顶部的距离为' + this.boxheight);
          })
          .exec();
      }
    });
  },
  onUnload() {
    if (this.timer) {
      clearInterval(this.timer);
      this.timer = null;
    }
  },
  onHide() {
    if (this.timer) {
      clearInterval(this.timer);
      this.timer = null;
    }
  }
};
</script>

<style lang="scss" scoped>
::v-deep .uni-steps__column-title {
  color: #000 !important;
}
.customCallout {
  box-sizing: border-box;
  background-color: #32b499;
  border-radius: 30rpx;
  display: inline-flex;
  padding: 6rpx 24rpx;
  justify-content: center;
  align-items: center;
  color: #fff;
}
.container {
  box-sizing: border-box;
  height: 100vh;
  overflow: hidden;
  .box {
    box-sizing: border-box;
    position: relative;
    top: 0;
    left: 0;
    width: 750rpx;
    height: 632rpx;
    padding-top: 64rpx;
    background: linear-gradient(179deg, #c5ddff 0%, #ffffff 100%);
    border-radius: 40rpx 40rpx 0rpx 0rpx;
    .title {
      display: flex;
      align-items: center;
      font-weight: bold;
      font-size: 34rpx;
      color: #222222;
      padding-left: 34rpx;
    }
    .driverinfo {
      display: flex;
      align-items: center;
      margin-top: 78rpx;
      margin-left: 18rpx;
      .right {
      }
    }
    .btngroup {
      display: flex;
      align-items: center;
      margin-top: 86rpx;
      justify-content: space-evenly;
    }
  }
  .cancelbox {
    box-sizing: border-box;
    width: 520rpx;
    height: 352rpx;
    background: #ffffff;
    border-radius: 20rpx 20rpx 20rpx 20rpx;
    padding-top: 36rpx;
    .title {
      font-weight: bold;
      font-size: 30rpx;
      color: #222222;
      text-align: center;
      margin-bottom: 68rpx;
    }
    .btn {
      display: flex;
      align-items: center;
      .btn1 {
        width: 260rpx;
        height: 98rpx;
        text-align: center;
        line-height: 98rpx;
        border-top: 1px solid #e7e7e7;
        border-right: 1px solid #e7e7e7;
      }
      .btn2 {
        width: 260rpx;
        height: 98rpx;
        text-align: center;
        border-top: 1px solid #e7e7e7;
        line-height: 98rpx;
      }
    }
  }
  .orderinfo {
    box-sizing: border-box;
    width: 750rpx;
    height: 946rpx;
    background: #ffffff;
    border-radius: 40rpx 40rpx 0rpx 0rpx;
    padding-top: 46rpx;
    .header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 20rpx;
    }
  }
}
</style>
<style>
.uni-steps__column-text {
  padding: 30rpx 0 !important;
}
.uni-steps__column-desc {
  font-size: 15px !important;
  color: #000 !important;
  padding-top: 10rpx !important;
}
</style>
